<template>
  <div id="map" style="width: 100%; height: 100%;">  </div>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const key = '0c069d624168ea56415191392161489c';

      const scriptCapitals = document.createElement('script');
      scriptCapitals.src = 'https://a.amap.com/jsapi_demos/static/resource/capitals.js';
      document.head.appendChild(scriptCapitals);

      const scriptAMap = document.createElement('script');
      scriptAMap.src = `https://webapi.amap.com/maps?v=1.4.15&key=${key}`;
      scriptAMap.onload = () => {
        const map = new AMap.Map('map', {
          zoom: 4,
          center: [108, 34]
        });
        for (let i = 0; i < capitals.length; i += 1) {
          const center = capitals[i].center;
          const circleMarker = new AMap.CircleMarker({
            center: center,
            radius: 10 + Math.random() * 10,
            strokeColor: 'white',
            strokeWeight: 2,
            strokeOpacity: 0.5,
            fillColor: 'rgba(0, 0, 255, 1)',
            fillOpacity: 0.5,
            zIndex: 10,
            bubble: true,
            cursor: 'pointer',
            clickable: true
          });
          circleMarker.setMap(map);
        }
      };

      document.head.appendChild(scriptAMap);
    }
  }
}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>
